<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--标准mui.css-->
		<link href="../../cssmui/mui.min.css" rel="stylesheet" />
		<link href="../../cssmui/mui.picker.min.css" rel="stylesheet" />
		<!--App自定义的css-->
		<link href="../../css/app.css" rel="stylesheet" />
		<link href="../../css/mylist.css" rel="stylesheet" />

		<script src="../../mui/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../mui/mui.picker.min.js"></script>
		<script src="../../mui/common.js"></script>

		<script src="../../js/vue.min.js"></script>
		<script src='../../js/jsondb.js'></script>
		<script src="../../js/map/mydict.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/map/ioservices.js"></script>
		<script src="../../js/loadpicker.js"></script>
		<style type="text/css">
			.mui-slider-group {
				height: 190px
			}
			
			.process_bg {
				background: url('../../images/bg1.png') no-repeat left top;
				background-size: 30px 40px;
			}
			
			.mui-progressbar-success span {
				background-color: #4cd964;
			}
			
			hr {
				height: 3px;
				border: none;
				border-top: 2px dotted #EBEBEB;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">付供应商款</h1>
			<a id="bt_cust" class=" mui-btn mui-btn-link mui-pull-right">选交易方</a>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="#back">
				<span class="mui-tab-label">退出</span>
			</a>
			<a class="mui-tab-item" href="#reduce">
				<span class="mui-tab-label">结算</span>
			</a>
		</nav>
		<div class="mui-content ">
			<div id="info_div" class="mui-card mui-card-content-inner mui-row ">
				<div class="subscript"> </div>
				<span class="mui-col-sm-3 mui-col-xs-3 "> 供应商：</span>
				<span class="mui-col-sm-9 mui-col-xs-9 text_content ">{{uname}}</span><br>
				<span class="mui-col-sm-3 mui-col-xs-3 "> 联系方式：</span>
				<span class="mui-col-sm-9 mui-col-xs-9 text_content ">{{联系方式}}</span><br>
				<span class="mui-col-sm-3 mui-col-xs-3 "> 地址：</span>
				<span class="mui-col-sm-9 mui-col-xs-9 text_content ">{{地址}}</span>

			</div>
			<form class="mui-input-group ">
				<div style="background-color:rgba(213,234,235,76); ">

					<div class=" mui-row li_item">
						<label class="mui-table-cell mui-col-sm-6 mui-col-xs-6 li_item_label " style="">{{titleconfig[2]}}金额 ￥</label>
						<div class="mui-table-cell mui-col-sm-6 mui-col-xs-6">
							<input type="number" class="mui-input-clear " readonly v-model="amount">
						</div>
					</div>
					<div class=" mui-row li_item" style="color:cornflowerblue">
						<label class="mui-table-cell mui-col-sm-6 mui-col-xs-6 li_item_label">本次结算￥</label>
						<div class="mui-table-cell mui-col-sm-6 mui-col-xs-6">
							<input type="number" class="mui-input-clear mui-h4 money" v-model="reduces">
						</div>
					</div>
					<div class=" mui-row li_item" v-if="mode=='b1'||mode=='b2'||mode=='rb1'" style="color:cornflowerblue">
						<label class="mui-table-cell mui-col-sm-6 mui-col-xs-6 li_item_label ">优惠减免￥</label>
						<div class="mui-table-cell mui-col-sm-6 mui-col-xs-6">
							<input type="number" class="mui-input-clear mui-h4 money" v-model="discount">
						</div>
					</div>
					<div class=" mui-row li_item" v-if="mode=='b1'||mode=='b2'||mode=='rb1'">
						<label class="mui-table-cell mui-col-sm-6 mui-col-xs-6 li_item_label">实际{{titleconfig[0]}}￥</label>
						<div class="mui-table-cell mui-col-sm-6 mui-col-xs-6">
							<input type="number" class="mui-input-clear " readonly v-model="paid">
						</div>
					</div>
					<div class=" mui-row li_item">
						<label class="mui-table-cell mui-col-sm-6 mui-col-xs-6 li_item_label">{{titleconfig[0]}}方式</label>
						<div class="mui-table-cell mui-col-sm-6 mui-col-xs-6">
							<input id="paytype" type="text" v-model="paytype">
						</div>
					</div>
					<div class=" mui-row li_item">
						<label class="mui-table-cell mui-col-sm-6 mui-col-xs-6 li_item_label">{{titleconfig[0]}}日期</label>
						<div class="mui-table-cell mui-col-sm-6 mui-col-xs-6">
							<input type="text" id="sdate" v-model="sdate">
						</div>
					</div>
					<div class="mui-input-range ">
						<textarea name="" placeholder="填写备注" class="mui-input-clear " rows="4"></textarea>
					</div>

				</div>

			</form>
		</div>
		<script type="text/javascript">
			//--------表单属性
			var _PORS = 'b1';
			var _statusname = '';

			//------------------声明 定义-------------			
			var targetTab = ['io_item.html', 'contact_list.html'];
			var _titleconfig = [];
			var _tb_settle = new XCDBHelp('tb_settle');
			var _tb_io = new XCDBHelp('tb_io');
			var _tb_contacts = new XCDBHelp('tb_contacts');

			var _curmd = null;

			//定义基模型
			var _basemd = {
				uname: '',
				联系方式: '',
				地址: '',
				reid: '',
				cid: '',
				mode: 'b2',
				paytype: '', //支付方式				
				amount: 0, //合计应付
				reduces: 0, //实际核减
				discount: 0, //优惠金额
				paid: 0, //实际付款=实际核减-优惠金额
				remark: '',
				sdate: new Date().Format('yyyy-MM-dd'),
				status: 1,
				titleconfig: [] //动态title		

			}

			//模型绑定于模板
			function bindVue() {
				_vu = new Vue({
					el: '.mui-content',
					data: _curmd

				}); //修改本次核减金额
				_vu.$watch("reduces", function(val, oldval) {

					if(Number(val) > Number(this.amount)) {
						mui.alert('本次' + this.titleconfig[0] + '金额不能 "大于" ' + this.amount)
						this.reduces = this.amount;
						return;
					}
					this.discount = 0;
					this.paid = val;
				});
				//修改优惠金额
				_vu.$watch("discount", function(val, oldval) {
					if(round2(val, 2) > round2(this.reduces, 2)) {
						mui.alert('优惠金额不能大于' + this.reduces)
						this.discount = this.reduces;
					}
					this.paid = this.reduces - val;
				});

				_vu.$watch("cid", function(val, oldval) {
					queryRS(val);
				});
				//如果checkbox 改变 订单总金额改变，本次核减改变，优惠清0，实际付款改变
			}
			//--------功能和样式控制-------------
			function setPors(p) {
				//console.log(p);
				_PORS = p;
				switch(_PORS) {
					case 'b1':
					case 'b2':
					case 'rb1':
						_titleconfig = ['付款', '供应商', '未付', 'b2']
						_basemd.mode = 'b2';
						break;
					case 's1':
					case 's2':
					case 'rs1':
						_titleconfig = ['收款', '客户', '待收', 's2']
						_basemd.mode = 's2';
						break;
				}

				mui('header .mui-title')[0].innerHTML = _titleconfig[0] + '单';
				G('info_div').querySelectorAll('span')[0].innerHTML = _titleconfig[1];
			}
			//----------------select-------------
			//查找所有未结订单
			//核减事务
			//提交表单
			//读取数据到模型
			//写入模型到数据,并提交

			//初始化回调
			function afterPlusReady() {
				var self = _self;
				console.log(JSON.stringify(self))
				if(self.pors)
					setPors(self.pors)
				else
					setPors('b2')

				_curmd = clone(_basemd);
				_curmd.titleconfig = _titleconfig;

				console.log(JSON.stringify(_titleconfig))
				bindVue();
				loaddict();
				if(self.contact) {
					getContecter(self.contact)
				}
				//console.log(self.pors)

				mui.init({
					gestureConfig: {
						tap: true, //默认为true
						doubletap: true, //默认为false
						longtap: true, //默认为false
						swipe: true, //默认为true
						drag: true, //默认为true
						hold: false, //默认为false，不监听
						release: false //默认为false，不监听
					}
				});

				mui(".mui-content").on('tap', '.subscript', function(e) {
					t = this.parentNode;
					if(t.style.height == "")
						t.style.height = "80px"
					else
						t.style.height = ""
				});
			}

			//---------------字典载入--------------------
			function loaddict() {
				loadPicker('paytype', Dict_payType);
				loadDateTimePicker('sdate', 'date');
			}
			//查询数据
			function queryRS(cid) {
				//载入有效商品数据
				var rs = _IOM.getCurmonDue(cid);
				//console.log("rs:"+JSON.stringify(rs));
				var dtl = [];
				if(rs) {
					var act = rs[0];
					switch(_PORS) {
						case 'b1': //从供应商买=应付供应商
						case 'b2': //付款
						case 'rb1': //客户退货=应付客户
							_curmd.amount = act.payable;
							break;
						case 's1': //卖给客户=应收客户
						case 's2': //收款
						case 'rs1': //退供应商货=应付供应商
							_curmd.amount = act.receivable;
							break;
					}
				}
			}

			//。。。。。。。。。。写入。。。。。。。。。。。
			//保存主表
			function save() {
				if(_curmd.amount == 0 || _curmd.amount == "") {
					return;
				}
				if(_curmd.reduces == 0 || _curmd.reduces == "") {
					mui.alert("请输入本次结算金额");
					return;
				}
				//主表
				var data = {}
				if(_curmd.cid == null || _curmd.cid == '') {
					mui.alert('请选择交易对象');
					return false;
				}
				data._idkey = _curmd.reid;
				data.reid = _curmd.reid;
				data.cid = _curmd.cid;
				data.mode = _curmd.mode;
				data.amount = round2(_curmd.amount, 2);
				data.reduces = round2(_curmd.reduces, 2);
				data.discount = round2(_curmd.discount, 2);
				data.paid = round2(_curmd.paid, 2);
				if(_curmd.sdate)
					data.sdate = _curmd.sdate;
				else
					data.sdate = new Date().Format();
				data.remark = _curmd.remark;
				data.status = _curmd.status;
				_curmd.reid = _tb_settle.setObj(data);

				console.log('_tb_settle save:' + JSON.stringify(data));

				var d1 = clone(MYMODEL['tb_journal']);
				d1.cid = data.cid;
				d1.amount = data.reduces;
				d1.mode = data.mode;
				d1.sdate = data.sdate;
				d1.remark = '凭证，对应付款单号:' + _curmd.reid;
				console.log("tb_journal save" + JSON.stringify(d1));
				_IOM.addJournal(d1);

				//优惠金额是 对存款 增减的反向的抵扣
				var d2 = clone(MYMODEL['tb_journal']);
				d2.cid = data.cid;
				if(data.mode == 'b2')
					d2.amount = data.discount; //if买入时优惠： 存款-应付+优惠 ;
				else
					d2.amount = 0 - data.discount; //if卖出时优惠： 存款+应收-优惠 ;
				d2.mode = 'h1'; //红冲存款
				d2.sdate = data.sdate;
				d2.remark = '红冲：优惠减免，对应付款单号:' + _curmd.reid;
				console.log("tb_journal save" + JSON.stringify(d1));
				_IOM.addJournal(d2);
				_curmd.reid = null;
				_curmd.reduces = 0;
				_curmd.distinct = 0;
				_curmd.remark = '';
				_curmd.status = 1;
				queryRS(d1.cid);
				_curmd.checkboxModel = [];
				return true;
			}

			//-----------初始化

			mui.ready(function() {
				//打开供应商选择列表
				mui('.mui-bar-nav').on('tap', '#bt_cust', function(e) {
					var i = (_PORS == 'b1' || _PORS == 'b2' || _PORS == 'rb1') ? 1 : 2;
					//联系人
					open(targetTab[1], {
						target: 'sel',
						group: i
					});
				});
				mui('nav').on('tap', '.mui-tab-item', function(e) {
					var hrf = this.getAttribute("href");
					if(hrf == "#back") {
						mui.back();
						return;
					} else if(hrf == "#reduce") {
						save();
						return;
					}
				});

				window.addEventListener('bechanged', function(e) {　 //获取参数值					
					if(e.detail.reload == 'contact') { //交易方发生改变
						getContecter(e.detail.data._idkey)
					}
				});
			});

			function getContecter(cid) {
				var bb = _tb_contacts.getList();
				//console.log(cid + JSON.stringify(bb))
				var data = _tb_contacts.getObjByID(cid);
				//console.log(cid + JSON.stringify(data))
				if(data) {
					_curmd.cid = data._idkey;
					_curmd.uname = data.uname;
					_curmd.联系方式 = data.tel;
					_curmd.地址 = data.addr;
				}
			}
		</script>

	</body>

</html>